<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref, computed } from 'vue'
	import { plotList } from '@/pages/game/rich/plot.js'
	import { verbatimText } from '@/pages/game/index.js'
	
	const loading = ref(false)
	const verbatimTask = ref(null)
	const plotIndex = ref(0)
	const textIndex = ref(-2) // -2 文字显示 -1 文字隐藏
	const desText = ref('')
	const desTextFinish = ref(0)
	
	const curPlot = computed(() => {
		return plotList[plotIndex.value]
	})
	
	function openPlot() {
		textIndex.value = -1
		setTimeout(() => {
			textIndex.value = 0
			nextText()
		}, 1000)
	}
	function startVerbatim() {
		desTextFinish.value = 0
		desText.value = ''
		verbatimTask.value = verbatimText(curPlot.value.textList[textIndex.value], desTextProgress, desTextComplete)
	}
	function desTextProgress(text) {
		desTextFinish.value = 1
		desText.value = text
	}
	function desTextComplete(text) {
		desTextFinish.value = 2
		desText.value = text
	}
	function nextText() {
		if(desTextFinish.value === 0) {
			startVerbatim()
		} else if(desTextFinish.value === 1 && desText.value) {
			verbatimTask.value.finish()
		} else if(desTextFinish.value === 2) {
			if(textIndex.value < curPlot.value.textList.length - 1) {
				textIndex.value += 1
				startVerbatim()
			} else {
				if(plotIndex.value < plotList.length - 1) {
					plotIndex.value += 1
					textIndex.value = -2
				} else {
					plotIndex.value = -1
				}
			}
		}
	}
	function exit() {
		uni.navigateBack({
			fail: () => {
				uni.switchTab({url: '/pages/tabbar/index'})
			}
		})
	}
	
	onLoad(() => {
	})
</script>

<template>
	<view class="app-container">
		<view class="app-content" :style="{backgroundImage: textIndex >= 0 && curPlot? `url('${curPlot.cover}')` : ''}">
			<view class="content-box" v-if="plotIndex >= 0">
				<view class="plot-box" v-if="textIndex < 0" @click="openPlot">
					<view :class="textIndex === -2? 'plot-show' : 'plot-hide'">第{{curPlot.chapter + 1}}章 {{curPlot.name}}</view>
				</view>
				<view class="text-box" v-else-if="textIndex >= 0">
					<view class="text-content" @click="nextText()">{{desText}}</view>
				</view>
			</view>
			<view class="content-end" v-else>
				<view class="end-text">精 彩 完 结</view>
				<view class="exit-text" @click="exit">返 回 菜 单</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.app-container{
		height: 100vh;
		.app-content{
			width: 100%;
			height: 100%;
			background-position: center;
			background-size: cover;
			background-repeat: no-repeat;
			.content-box{
				width: 100%;
				height: 100%;
			}
			.content-end{
				width: 100%;
				height: 100%;
				background-color: #000000;
				padding-top: 440rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 72rpx;
				font-weight: 600;
				font-size: var(--theme-xl);
				line-height: var(--theme-xl-line);
			}
			.plot-box{
				width: 100%;
				height: 100%;
				background-color: #000000;
				font-size: var(--theme-xl);
				display: flex;
				justify-content: center;
				align-items: center;
				.plot-show{
					animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
				}
				.plot-hide{
					animation: text-blur-out 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
				}
			}
			.text-box{
				width: 100%;
				height: 100%;
				position: relative;
				.text-content{
					position: absolute;
					bottom: 0;
					left: 0;
					z-index: 1;
					width: 100%;
					min-height: 200rpx;
					padding: 24rpx 12rpx;
					overflow: hidden;
					border-radius: 36rpx 36rpx 0 0;
					background-color: rgba(30, 64, 175, 0.8);
					border: 2rpx solid rgba(59, 130, 246, 0.3);
					
				}
			}
			.end-text{
				color: #FFFFFF;
				animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
			}
			.exit-text{
				color: #82848a;
				animation: text-focus-in 1s 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
			}
		}
	}
	@keyframes text-focus-in {
		0% {
			filter: blur(12px);
			opacity: 0;
		}
		100% {
			filter: blur(0px);
			opacity: 1;
		}
	}
	@keyframes text-blur-out {
		0% {
			filter: blur(0.01);
		}
		100% {
			filter: blur(12px) opacity(0%);
		}
	}
	
</style>